<template>
    <div style="text-align: center;background-color: #f1f1f3;height: 100%;padding: 0px;margin: 0px;">
        <h1 style="font-size: 50px;">{{'欢迎你！'+user.name}}</h1>
        <el-descriptions title="个人中心" :column="2" size="40" border>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-s-custom"></i>
                    账号
                </template>
                {{user.studentId}}
            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    电话
                </template>
                {{user.phoneNumber}}
            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    性别
                </template>
                <el-tag
                        :type="user.sex === '1' ? 'danger' : 'warning'"
                        disable-transitions>
                    <i :class="user.sex==1?'el-icon-male':'el-icon-female'"></i>
                    {{user.sex==1?"男":"女"}}
                </el-tag>
            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    角色
                </template>
                <el-tag
                        type="success"
                        disable-transitions>
                    {{user.userIdentity==0?"超级管理员":(user.userIdentity==1?"管理员":(user.userIdentity==6?"中共党员":(user.userIdentity==5?"中共预备党员":(user.userIdentity==4?"发展对象":(user.userIdentity==3?"积极分子":"入党成员")))))}}
                </el-tag>
            </el-descriptions-item>

        </el-descriptions>

<!--
        <div class="organization">
            <el-descriptions title="我的组织信息" direction="vertical" :column="1" border>
                <el-descriptions-item label="组织名称">kooriookami</el-descriptions-item>
                <el-descriptions-item label="所属学院">18100000000</el-descriptions-item>
                <el-descriptions-item label="组织人数">苏州市</el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="sex" id="sex"></div>
-->

        <div class="date">
            <DateUtils></DateUtils>
        </div>

    </div>

</template>

<script>
    import DateUtils from "./DateUtils";
    import * as echarts from "echarts";

    export default {
        name: "Home",
        components: {DateUtils},
        data() {
            return {
                title: '新闻列表',
                border: true,
                column: 1,
                tableData: [],
                organizationsData: [],
                user: {}
            }
        },
  /*      mounted() { //页面元素渲染之后再触发
            var chartDom = document.getElementById('sex');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 40,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 1048, name: 'Search Engine'},
                            {value: 735, name: 'Direct'},
                            {value: 580, name: 'Email'},
                            {value: 484, name: 'Union Ads'},
                            {value: 300, name: 'Video Ads'}
                        ]
                    }
                ]
            };
            myChart.setOption(option);
        },*/
        methods: {
            formatOrganizations(row) {
                let temp = this.organizationsData.find(item => {
                    return item.code == row.organization
                });
                return temp && temp.name
            },

            init() {
                this.user = JSON.parse(sessionStorage.getItem('CurUser'))
            }
        },
        computed: {
            latestNews() {
                return this.tableData.length > 0 ? this.tableData[0] : {};
            }
        },
        created() {
            this.init()
        }
    }
</script>

<style scoped>
    .organization {
        position: absolute; /* 设置为绝对定位 */
        left:16%;
        bottom: 16%;
        width: 300px;
        margin: 30px 0 0 30px;
    }

    .sex {
        position: absolute; /* 设置为绝对定位 */
        bottom: 10%; /* 盒子距离底部的距离 */
        right: 20%; /* 盒子距离右侧的距离 */
        width: 300px;
        height: 360px;
    }


    .el-descriptions {
        width: 90%;

        margin: 0 auto;
        text-align: center;
    }
</style>